import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
// import { Tag } from 'antd';
import { queryRecoverys } from '../service';
import type { RecoveryTableItem } from '../types.d';
// const mapColor = new Map()
//   .set(0, '#839bac')
//   .set(1, '#108ee9')
//   .set(2, '#faad14')
//   .set(3, 'default')
//   .set(4, 'black')
//   .set(5, '#70c04e');
export default () => {
  const columns: ProColumns<RecoveryTableItem>[] = [
    {
      dataIndex: '_id',
      title: 'id',
      hideInTable: true,
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '收费员',
      dataIndex: 'jobNo',
      align: 'center',
    },
    {
      title: '追缴金额',
      dataIndex: 'amount',
      hideInSearch: true,
      align: 'center',
      valueType: 'money',
      renderText: (t) => t / 100,
    },
    {
      title: '车牌号码',
      dataIndex: 'plateNumber',
      align: 'center',
    },
    {
      title: '车牌颜色',
      dataIndex: 'plateColor',
      align: 'center',
      hideInSearch: true,
      hideInForm: true,
      valueEnum: {
        0: { text: '未知' },
        1: { text: '蓝' },
        2: { text: '黄' },
        3: { text: '白' },
        4: { text: '黑' },
        5: { text: '绿' },
        6: { text: '黄绿' },
      },
      // valueEnum: {
      //   0: {
      //     text: (
      //       <Tag
      //         style={{ width: '50px', fontWeight: 'bolder', margin: '0 auto' }}
      //         color={mapColor.get(0)}
      //       >
      //         未知
      //       </Tag>
      //     ),
      //   },
      //   1: {
      //     text: (
      //       <Tag
      //         style={{ width: '50px', fontWeight: 'bolder', margin: '0 auto' }}
      //         color={mapColor.get(1)}
      //       >
      //         蓝
      //       </Tag>
      //     ),
      //   },
      //   2: {
      //     text: (
      //       <Tag
      //         style={{ width: '50px', fontWeight: 'bolder', margin: '0 auto' }}
      //         color={mapColor.get(2)}
      //       >
      //         黄
      //       </Tag>
      //     ),
      //   },
      //   3: {
      //     text: (
      //       <Tag
      //         style={{ width: '50px', fontWeight: 'bolder', margin: '0 auto' }}
      //         color={mapColor.get(3)}
      //       >
      //         白
      //       </Tag>
      //     ),
      //   },
      //   4: {
      //     text: (
      //       <Tag
      //         style={{ width: '50px', fontWeight: 'bolder', margin: '0 auto' }}
      //         color={mapColor.get(4)}
      //       >
      //         黑
      //       </Tag>
      //     ),
      //   },
      //   5: {
      //     text: (
      //       <Tag
      //         style={{ width: '50px', fontWeight: 'bolder', margin: '0 auto' }}
      //         color={mapColor.get(5)}
      //       >
      //         绿
      //       </Tag>
      //     ),
      //   },
      // },
    },
    {
      title: '追缴时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      align: 'center',
      hideInSearch: true,
      hideInForm: true,
    },
  ];
  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '已追缴列表',
        breadcrumb: {
          routes: [
            { path: '/', breadcrumbName: '首页' },
            { path: '/arrears-recovery', breadcrumbName: '欠费追缴' },
            { path: '/arrears-recovery/recovery', breadcrumbName: '追缴列表' },
          ],
        },
      }}
    >
      <ProTable<RecoveryTableItem>
        rowKey="_id"
        columns={columns}
        scroll={{ x: true }}
        style={{ whiteSpace: 'nowrap' }}
        search={{
          labelWidth: 'auto',
        }}
        columnEmptyText="暂无数据"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        debounceTime={300}
        request={async (param, sort) => {
          const res = await queryRecoverys(param, sort);
          return res;
        }}
      />
    </PageHeaderWrapper>
  );
};
